<template>
    <div>
        <h1>组件一</h1>
        <hr />
        count:{{ $store.state.count }}
        <hr />
        count10:{{ $store.getters.count10 }}
        <hr />
        <!-- 直接添加  页面发生变化 但是devtools中的值不变 -->
        <button @click="$store.state.count++">+1</button>
        &nbsp; &nbsp;
        <button @click="handlerAddCount">+1 mutations</button>
        &nbsp; &nbsp;
        <button @click="handlerAddCountN">+N mutations</button>
        &nbsp; &nbsp;
        <button @click="handlerAddCountAction">+1 action</button>
        &nbsp; &nbsp;
        <button @click="handlerAddCountActionN">+N action</button>

    </div>
</template>

<script>
export default {
    methods:{
        handlerAddCountAction() {
            // 触发addCountAction  dispatch
            this.$store.dispatch('addCountAction')
        },
        handlerAddCountActionN() {
            this.$store.dispatch('addCountActionN',{
                a:10,
                b:20
            })
        },
        handlerAddCount() {
            this.$store.commit('addCount')

        },
        handlerAddCountN() {
            // 调用addCountN时 有参数的
            /**
             * commit 在提交参数的时候  参数只能有一个  如果就想有多个 
             * 通常  提交的是一个对象
             */
            // 不正确的写法
            // this.$store.commit('addCountN',10,20)
            this.$store.commit('addCountN',{
                a:10,
                b:20
            })
        }
    }
};
</script>

<style>

</style>
